<template>
  <!-- //banner section -->
  <section class="w3l-products py-5" id="projects">
    <div class="container py-lg-3">
      <div class="header-section text-center mx-auto">
        <span class="subhny-title text-center mb-2">快捷推荐</span>
        <h3 class="hny-title text-center mb-5">畅销产品</h3>
      </div>
      <div class="mt-5">
        <div class="mx-auto">
          <!--Horizontal Tab-->
          <div id="parentHorizontalTab">
            <ul class="resp-tabs-list hor_1">
              <li
                v-for="(tab, index) in tabs"
                :key="index"
                @click="activeTab = index"
                :class="{ 'resp-tab-active active': activeTab === index }">
                {{ tab.title }}
              </li>
              <div class="clear"></div>
            </ul>
            <div class="resp-tabs-container hor_1">
              <div
                v-for="(tab, index) in tabs"
                :key="index"
                class="resp-tabs-container hor_1"
                style="border-color: rgb(193, 193, 193)">
                <h2
                  @click="toggleTab(index)"
                  class="resp-accordion hor_1"
                  style="
                    background: none rgb(245, 245, 245);
                    border-color: rgb(193, 193, 193);
                  "
                  :class="{
                    'resp-tab-active  active-h2': activeTab === index,
                  }">
                  <span class="resp-arrow"></span>
                  {{ tab.title }}
                </h2>
                <Card :productList="tab.products" v-show="activeTab == index" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Card from "./Card.vue";
// 引入图片
const img1 = new URL("@/assets/images/1.png", import.meta.url).href;
const img2 = new URL("@/assets/images/2.png", import.meta.url).href;
const img3 = new URL("@/assets/images/3.png", import.meta.url).href;

// 引入图片
const img4 = new URL("@/assets/images/4.png", import.meta.url).href;
const img5 = new URL("@/assets/images/5.png", import.meta.url).href;
const img6 = new URL("@/assets/images/6.png", import.meta.url).href;

// 引入图片
const img7 = new URL("@/assets/images/7.png", import.meta.url).href;
const img8 = new URL("@/assets/images/8.png", import.meta.url).href;
const img9 = new URL("@/assets/images/9.png", import.meta.url).href;

const products = ref([
  {
    url: "#url",
    image: img1,
    title: "Cheeseburger with Salad",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "19.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img2,
    title: "Cheeseburger with Bacon",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "29.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img3,
    title: "Classic Bacon Hamburger",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img1,
    title: "Cheeseburger with Salad",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "19.00",
    rating: [1, 2, 3, 4, 5],
  },
]);
const products2 = ref([
  {
    url: "#url",
    image: img4,
    title: "Classic Seafood Pizza",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img5,
    title: "Shrimp & Olive Pizza",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img6,
    title: "Thin Cheese Pizza",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img4,
    title: "Classic Seafood Pizza",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
]);

// 产品数据
const products3 = ref([
  {
    url: "#url",
    image: img7,
    title: "Herb Chicken Fillet",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img8,
    title: "Chicken Fillet with Salad",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img9,
    title: "Boiled Pork with Spices",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
  {
    url: "#url",
    image: img9,
    title: "Boiled Pork with Spices",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
    price: "30.00",
    rating: [1, 2, 3, 4, 5],
  },
]);
// 响应式变量，当前激活的标签
const activeTab = ref(0);
const tabs = ref([
  {
    title: "脱骨鸭爪系列",
    products: products,
  },
  {
    title: "脱骨鸡爪系列",
    products: products2,
  },
  {
    title: "酱香/麻辣",
    products: products3,
  },
]);

// 切换选项卡函数
const toggleTab = (index) => {
  // 如果当前选项卡已经激活，则收起它
  if (activeTab.value === index) {
    activeTab.value = -1; // 关闭当前激活的标签
  } else {
    activeTab.value = index; // 否则激活新的标签
  }
};
</script>

<style scoped>
.active {
  background-color: #dc3545 !important;
  color: #fff !important;
}
.active-h2 {
  color: #dc3545;
}
</style>
